<template>
  <!-- 添加或修改菜单对话框 -->
  <el-dialog :title="!form.id ? '新增' : '修改'" :visible.sync="visible">
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="栏目标题" prop="name">
            <el-input v-model="form.name" placeholder="请输入栏目标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="内容定位" prop="bodykey">
            <el-input v-model="form.bodykey" placeholder="请输入内容定位" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="页面风格" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in typeDictList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传图片" prop="img">
            <avue-input-icon
              v-model="form.img"
              :icon-list="iconList"
            ></avue-input-icon>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上级栏目">
            <treeselect
              v-model="form.parentId"
              :options="classlistOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="所属栏目"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属站点">
            <treeselect
              v-model="form.siteId"
              :options="websiteOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="所属站点"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="浏览网址" prop="url">
            <el-input
              v-model="form.url"
              placeholder="请填写网址(例：https://www.softmes.com)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="打开方式" prop="openMode">
            <el-select v-model="form.openMode" placeholder="请选择">
              <el-option
                v-for="item in openModeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="首页数量" prop="number">
            <el-input-number
              v-model="form.number"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="分页数量" prop="insideNum">
            <el-input-number
              v-model="form.insideNum"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="排序" prop="sequence">
            <el-input-number
              v-model="form.sequence"
              controls-position="right"
              :min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="是否导航" prop="isMenu">
            <el-radio-group v-model="form.isMenu">
              <el-radio-button label="PD10001">是</el-radio-button>
              <el-radio-button label="PD10002">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="栏目状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio-button label="ZT10001">显示</el-radio-button>
              <el-radio-button label="ZT10002">隐藏</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="英文栏目" prop="subtitle">
            <el-input v-model="form.subtitle" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="栏目介绍">
            <avue-ueditor
              v-model="form.content"
              ref="options"
              :options="options"
            ></avue-ueditor>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getObj,
  addObj,
  putObj,
} from "@/api/cms/classlist";
import { fetchWebsiteTree } from "@/api/sdAdmin/syswebsite";
import Treeselect from "@riophae/vue-treeselect";
import iconList from "@/const/iconList";
import TableForm from "./";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "classlist-form",
  components: {
    Treeselect,
    TableForm,
  },
  props: ["typeDictList"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 菜单树选项
      classlistOptions: [],
      websiteOptions: [],
      // 是否显示弹出层
      visible: false,
      // 图标
      iconList: iconList,
      openModeList: [
        {
          label: "_blank",
          value: "_blank",
        },
        {
          label: "_parent",
          value: "_parent",
        },
        {
          label: "_self",
          value: "_self",
        },
        {
          label: "_top",
          value: "_top",
        },
      ],
      options: {
        //普通图片上传
        action: "https://avuejs.com/imgupload",
        customConfig: {}, //wangEditor编辑的配置
        props: {
          res: "data",
          url: "url",
        },
        //七牛云oss配置
        qiniu: {
          AK: "",
          SK: "",
          scope: "test",
          url: "http://pm7cc17lu.bkt.clouddn.com/",
          deadline: 1,
        },
        //阿里云oss配置
        ali: {
          region: "oss-cn-beijing",
          endpoint: "oss-cn-beijing.aliyuncs.com",
          accessKeyId: "",
          accessKeySecret: "",
          bucket: "avue",
        },
      },
      form: {
        id: undefined,
        name: undefined,
        bodykey: undefined,
        openMode: undefined,
        type: undefined,
        img: undefined,
        url: undefined,
        number: undefined,
        insideNum: undefined,
        parentId: undefined,
        status: "ZT10001",
        isMenu: undefined,
        sequence: 999,
        subtitle: undefined,
        content: undefined,
      },
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: "参数标题不能为空",
            trigger: "blur",
          },
        ],
        sequence: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "blur",
          },
        ],
        value: [
          {
            required: true,
            message: "参数值不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getTreeselect();
  },
  methods: {
    init(isEdit, id, classlist) {
      if (id != null) {
        this.form.parentId = id;
      }
      this.classlistOptions = [];
      const option = {
        id: -1,
        name: "根栏目",
        children: [],
      };
      option.children = classlist;
      this.classlistOptions.push(option);
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.$refs["options"].text = '';
        if (isEdit) {
          getObj(id).then((response) => {
            this.form = response.data.data;
          });
        } else {
          this.form.id = undefined;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.form);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.form.parentId === undefined) {
            this.form.parentId = -1;
          }

          if (this.form.id) {
            putObj(this.form).then((data) => {
              this.$message.success("修改成功");
              this.visible = false;
              this.$emit("refreshDataList");
            });
          } else {
            addObj(this.form).then((data) => {
              this.$message.success("添加成功");
              this.visible = false;
              this.$emit("refreshDataList");
            });
          }
        }
      });
    },
    /** 查询参数下拉树结构 */
    getTreeselect() {
      fetchWebsiteTree(false).then((response) => {
        this.websiteOptions = [];
        const website = {
          id: -1,
          name: "根站点",
          children: [],
        };
        website.children = response.data.data;
        this.websiteOptions.push(website);
      });
    },
    /** 转换参数数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>
